<template>
  <div>
    <el-dialog
      :title="title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="visible"
    >
      <el-form
        :model="inputForm"
        ref="inputForm"
        v-loading="loading"
        :class="method==='view'?'readonly':''"
        label-width="110px"
      >
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="房产类型:">
              <label style="font-size:18px;">{{item.projectBuildingName}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应缴月份:">
              <label style="color:red;font-size:18px;">{{item.writeDate}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月总用量:">
              <label style="font-size:18px;">{{item.totalPoint | isNotNull}}</label>
            </el-form-item>
          </el-col>
          <!--详情-->
          <el-col>
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              style="margin-top:10px;"
            >
              <el-tab-pane
                label="水表信息"
                name="first"
              >
                <el-col :span="8">
                  <el-form-item label="房产楼号/区域:">
                    <label style="font-size:18px;">{{item.prjectFloorNumber}}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联房产编号:">
                    <label style="font-size:18px;">{{item.projectNumber}}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="抄表时间:">
                    <label style="font-size:18px;">{{item.writeTime}}</label>
                  </el-form-item>
                </el-col>
                <avue-crud
                  ref="crud1"
                  :data="tableOptionModify"
                  :option="option"
                  @row-update="addUpdate"
                  @row-del="addDelete"
                >
                  <template
                    slot-scope="{row,index}"
                    slot="menu"
                  >
                    <el-button
                      v-if="index==0"
                      type="text"
                      size="small"
                      @click="rowCell1(row,index)"
                      icon="el-icon-edit"
                    >{{row.$cellEdit?'保存':'编辑'}}</el-button>
                  </template>
                </avue-crud>
              </el-tab-pane>
              <!--电表信息-->
              <el-tab-pane
                label="电表信息"
                name="second"
              >
                <el-col :span="8">
                  <el-form-item label="房产楼号/区域:">
                    <label style="font-size:18px;">{{item.prjectFloorNumber}}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联房产编号:">
                    <label style="font-size:18px;">{{item.projectNumber}}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="抄表时间:">
                    <label style="font-size:18px;">{{item.writeTime}}</label>
                  </el-form-item>
                </el-col>
                <avue-crud
                  ref="crud"
                  :data="tableOptionModify"
                  :option="option"
                  @row-update="addUpdate"
                  @row-del="addDelete"
                >
                  <template
                    slot='totalPoint'
                    slot-scope="scope"
                  >
                    {{(scope.row.endPoint-scope.row.startPoint)>0?scope.row.endPoint-scope.row.startPoint:0}}
                  </template>
                  <template
                    slot-scope="{row,index}"
                    slot="menu"
                  >
                    <el-button
                      v-if="index==0"
                      type="text"
                      size="small"
                      @click="rowCell(row,index)"
                      icon="el-icon-edit"
                    >{{row.$cellEdit?'保存':'编辑'}}</el-button>
                  </template>
                </avue-crud>
              </el-tab-pane>
            </el-tabs>

          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
import { tableOptionModify } from '@/const/crud/market/meter/Private/person'
import { getById, viewSave } from '@/api/market/meter/Private/person'
export default {
  data () {
    return {
      title: '',
      method: '',
      dialogWidth: '50%',
      visible: false,
      activeName: 'first',
      tableOptionModify: [],
      loading: false,
      inputForm: {
        id: '',
        projectBuildingId: '',
        projectUnitId: '',
        projectName: '',
        writeDate: '',
        totalPoint: '',
        totalPointd: '',
        createDate: '',
        unitPrice: '',
        meterType: '',
      },
      item: {

      },
      option: tableOptionModify
    }
  },
  components: {
  },
  filters: {
    isNotNull (value) {
      if (value) {
        return value
      } else {
        return '0.00'
      }
    }
  },
  methods: {
    rowCell (row, index) {
      this.$refs.crud.rowCell(row, index)
    },
    rowCell1 (row, index) {
      this.$refs.crud1.rowCell(row, index)
    },
    addDelete (row, index) {
    },
    addUpdate (form, index, done, loading) {
      console.log(form)
      if (parseFloat(this.tableOptionModify[index].endPoint) >= parseFloat(this.tableOptionModify[index].startPoint)) {
        let sum = (this.tableOptionModify[index].endPoint - this.tableOptionModify[index].startPoint).toFixed(2)
        if (sum > 0) {
          this.tableOptionModify[index].totalPoint = sum
        } else {
          this.tableOptionModify[index].totalPoint = 0
        }
        let params = {
          endPoint: form.endPoint,
          startPoint: form.startPoint,
          totalPoint: this.tableOptionModify[index].totalPoint,
          id: form.id,
          meterType: this.item.meterType,
          privateMeterRelateId: this.tableOptionModify[index].privateMeterRelateId,
          writeDate: this.item.writeDate,
          writeTime: this.item.writeTime
        }
        if (!form.id) {
          params.publicMeterId = this.tableOptionModify[index].publicMeterId
        }
        viewSave(params).then(res => {
          this.item.totalPoint = sum
          this.$message.success('保存成功')
          loading()
          done()
        })
      } else {
        this.$message.warning('本期读数不能小于上期读数')
        loading()
        done()
        this.tableOptionModify[index].$cellEdit = true
      }
    },
    // 表头样式设置
    headClass () {
      return 'text-align: center;background:#fafafa;'
    },
    // 表格样式设置
    rowClass () {
      return 'text-align: center;'
    },
    handleClick (tab, event) {
      //tab切换历史记录,加载数据
      if (tab.name == 'second') {
        this.item.meterType = 1
        getById(this.item).then(res => {
          res.data.data.recordVos.forEach((item, index) => {
            if (!item.totalPoint) {
              item.totalPoint = 0
            }
            item.indexid = index + 1
          })
          this.item.totalPoint = res.data.data.allTotalPoint
          this.tableOptionModify = res.data.data.recordVos
        })
      } else {
        this.item.meterType = 2
        getById(this.item).then(res => {
          res.data.data.recordVos.forEach((item, index) => {
            if (!item.totalPoint) {
              item.totalPoint = 0
            }
            item.indexid = index + 1
          })
          this.item.totalPoint = res.data.data.allTotalPoint
          this.tableOptionModify = res.data.data.recordVos
        })
      }
    },
    init (method, item) {
      this.method = method
      // this.inputForm.id = id
      this.item = item
      if (method === 'view') {
        this.title = '查看抄表信息'
      }
      this.visible = true
      if (item.projectBuildingId == 2) {
        this.activeName = 'second'
        this.item.meterType = 1
        item.meterType = 1
      } else {
        this.activeName = 'first'
        this.item.meterType = 2
        item.meterType = 2
      }
      getById(item).then(res => {
        res.data.data.recordVos.forEach((item, index) => {
          if (!item.totalPoint) {
            item.totalPoint = 0
          }
          item.indexid = index + 1
          if (index == 0) {
            item.$cellEdit = false
          }
        })
        this.item.totalPoint = res.data.data.allTotalPoint
        this.tableOptionModify = res.data.data.recordVos
      })
    },
  }
}</script>
<style lang="scss" scoped>
/deep/.avue-crud__menu {
  display: none;
}
/deep/.avue-crud__pagination {
  display: none;
}
</style>
